let layerIndex;

/**
 * 弹出学生新增/更新对话框
 */
// function showStudentDlg(id) {
//     let title = '新增学生';
//     if (id) {
//         title = '编辑学生'
//         $('#formID').css('display', 'block')
//         $.ajax({
//             url: "/api/student/" + id,
//             method: 'GET',
//
//         }).done(result => {
//             console.log(result)
//             $.each(result, function (key, value) {!
//                 let field = $('#stuForm [name="' + key + '"]')
//                 if (field.is(':radio')) {
//                     field.filter('[value="' + value + '"]').prop('checked', true)
//                 } else if (field.is(':checkBox')) {
//                     field.prop('checked', value === 'yes')
//                 } else {
//                     field.val(value)
//                 }
//             })
//         })
//     } else {
//         $('#stuForm')[0].reset()
//         $('#formID').css('display', 'none')
//     }
//     layerIndex = layer.open({
//         type: 1,
//         title: title,
//         area: ['520px', 'auto'],
//         content: $('#stuForm')
//     })
// }

// 获取查询输入值，用于拼凑一个学生
function getSearchCondition() {
    let formData = {}
    // 遍历输入元素，将值存储到formData中
    $("#queryForm").find("input", "select").each(function () {
        let name = $(this).attr("name") // 获取元素的 name属性
        let value = $(this).val() // 获取元素的值

        // 只有name 值存在且不为空 才会添加到formData中
        if (name && value) {
            formData[name] = value
        }
    })

    return formData
}

// 获取查询输入值，用于拼凑一个学生
function getSearchCondition() {
    let formData = {}
    // 遍历输入元素，将值存储到formData中
    $("#queryForm").find("input", "select").each(function () {
        let name = $(this).attr("name") // 获取元素的 name属性
        let value = $(this).val() // 获取元素的值

        // 只有name 值存在且不为空 才会添加到formData中
        if (name && value) {
            formData[name] = value
        }
    })

    return formData
}

layui.use(function () {
    layui.form.on('submit(demo-reg)', function () {
        event.preventDefault()
        comitStuDlg()
    })
    // 2. 表格初始化
    const table = layui.table;
    // 获取查询条件
    let student = getSearchCondition();

    //3 创建layui 的实例
    table.render({
        elem: '#tbStudent',
        url: '/api/student/getbypage',
        method: "POST",
        contentType: 'application/json',
        where: {'data': student},
        page: true,
        cols: [[
            {type: 'checkbox', fixed: 'left'},
            {field: 'id', fixed: 'left', width: 80, title: 'ID', sort: true,},
            {field: 'name', title: '姓名'},
            {field: 'sno', title: '学号', width: 150},
            {
                field: 'sex', width: 80, title: "性别", sort: true,
                templet: d => d.sex === 1 ? "男" : (d.sex === 2 ? "女" : "未知")
            },

            {field: 'age', width: 100, title: '年龄', sort: true},

            {fixed: 'right', title: '操作', width: 134, minWidth: 125, templet: '#editTemplate'}
        ]],
        done: function (rs) {
            console.log(rs);
        }
    });

    // 触发单元格工具事件
    table.on("tool(tbStudent)", function (obj) {
        let data = obj.data
        if (obj.event === "edit") {
            showStudentEdit("edit",data)
        }
    })
})


function comitStuDlg() {
    let id = $('#id').val()
    let formData = $('#stuForm').serialize()
    if (id != null && id != '') {
        $.ajax({
            url: "/api/student/update",
            method: 'PUT',
            data: formData
        }).done(result => {
            console.log(result)
            if (result.data.id) {
                search()
                console.log('update success')
                if (layerIndex) {
                    layer.close(layerIndex)
                }

            }
        }).fail((jqXHR, textStatus, errorThrown) => {
            console.error("Request failed: " + textStatus + ' - ' + errorThrown)
        })
    } else {

        $.ajax({
            url: "/api/student/add",
            method: 'POST',
            data: formData
        }).done(result => {
            console.log(result)
            if (result.data.id) {
                search()
                console.log('add success')
                if (layerIndex) {
                    layer.close(layerIndex)
                }

            }
        }).fail((jqXHR, textStatus, errorThrown) => {
            console.error("Request failed: " + textStatus + ' - ' + errorThrown)
        })
    }
    $('#btnOK').prop('disable', true).addClass('layui-btn-disabled')
}


// function loadStuList() {
//
//     $.ajax(
//         {
//             url: "/api/student/list"
//         }
//     ).done(function (data) {
//         let html = "";
//         data.data.forEach((element, index) => {
//             html += "<tr>"
//             html += "<td>" + element.id + "</td>"
//             html += "<td>" + element.name + "</td>"
//             html += "<td>" + element.sex + "</td>"
//             html += "<td>" + element.age + "</td>"
//             html += "<td>" + element.sno + "</td>"
//             html += "<td> <a href='#' onclick='showStudentDlg(" + element.id + ")'>编辑</a> &nbsp;&nbsp;" +
//                 "<a href='#' onclick='deleteById(" + element.id + ")'>删除</a> </td>"
//             html += "</tr>"
//         })
//         $("#studentTb").html(html)
//     })
// }


// function deleteById(id) {
//     layer.confirm('你确定要删除？一旦删除，不可恢复！', {icon: 3}, function () {
//         $.ajax({
//             url: '/api/student/delete/' + id,
//             method: 'DELETE'
//         }).done(result => {
//             loadStuList()
//         })
//         layer.closeAll()
//     })
// }

// 搜索方法
function search() {
    let student = getSearchCondition()
    const table = layui.table
    table.reloadData("tbStudent", {
        where: {data: student}
    })
    console.log("where condition:" + JSON.stringify(student))
}


function deleteByIds() {
    layui.use(['layer'], function () {
        let layer = layui.layer;
        layer.confirm("确定要删除吗", {icon: 3}, function (index) {
            const table = layui.table;
            let checkStatus = table.checkStatus("tbStudent"); // teacher 表格id  或者filter id
            let ids = checkStatus.data.map(item => item.id).join(",");

            let request = $.ajax({
                url: "/api/student/deleteByIds?ids=" + ids,
                method: "POST",
            })

            request.done(function (msg) {
                search()
                layer.close(index)
            })
            request.fail(function (jqXHR, textStatus) {
                alert("操作失败")
            })
        }, function (index) {
            layer.msg("取消成功", {icon: 1})
            layer.close(index)
        })
    })

}


function showStudentEdit(type,data) {

    if(type==='add'){
        // 重置表单
        $("#stuForm").find('input, select').each(function () {
            $(this).val(''); // 清空输入框和选择框的值
        });
        layerIndex=layer.open(
            {
                type:1,
                title:"新增信息",
                area:['520px','auto'],
                content:$("#stuForm")
            }
        )
    }else{

        layerIndex=layer.open(
            {
                type:1,
                title:"修改信息",
                area:['520px','auto'],
                content: $("#stuForm"), // 直接传递 DOM 元素
                success: function (layero, index) {
                    // 获取表单元素
                    const form = layero.find('#stuForm')[0]

                    // 将初始数据应用到表单字段中
                    if (!data) {
                        return;
                    }
                    Object.keys(data).forEach(key => {
                        const element = form.querySelector(`[name="${key}"]`);
                        if (!element) {
                            return;
                        }
                        if (element.type === 'checkbox' || element.type === 'radio') {
                            element.checked = data[key]
                        } else if (element.tagName.toLowerCase() === 'select') {
                            element.value = data[key]
                        } else {
                            element.value = data[key]
                        }
                    })
                    // 弹出层成功打开后的其他操作
                    console.log('弹出层已打开')
                }
            }
        )
    }
}